<!-- 团队报名-联系人 -->
<template>
	<view class="container">
		<view class="u-node-tip">
			<view class="u-order-desc">报名流程：</view>
		</view>
		<!-- 时间进度 -->
		<view class="wrap">
			<u-time-line-item nodeTop="2">
				<template v-slot:node>
					<span style="font-size: 14px;">①</span>
					<!-- <view class="u-node" style="background: #ffffff;"> -->
					<!-- <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> -->
					<!-- <view class="">1</view> -->
					<!-- <u-icon color="#fff" :size="24">1</u-icon> -->

					<!-- </view> -->
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">填写联系人信息</view>

					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="2">
				<!-- 				<template v-slot:node>
					<view class="u-node" style="background: #ffffff;"> -->
				<!-- <u-icon name="account-fill" color="#fff" :size="24"></u-icon> -->
				<!-- 						<view class=""></view>
					</view>
				</template> -->
				<template v-slot:node>
					<span style="font-size: 14px;">②</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">邀请学员报名(选择报考等级，是否培训，上传资料)</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="0">
				<template v-slot:node>
					<span style="font-size: 14px;">③</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">确认报名人数，并提交审核(报名截止时自动提交)</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="0">
				<template v-slot:node>
					<span style="font-size: 14px;">④</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">确认费用并支付(优惠政策请联系客服)</view>
					</view>
				</template>
			</u-time-line-item>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 负责人姓名 -->
				<u-form-item label="联系人姓名:" prop="contactName" label-width="160">
					<u-input v-model="form.contactName" placeholder="请输入联系人姓名" clearable />
				</u-form-item>

				<!-- 负责人岗位 -->
				<u-form-item label="手机号:" prop="contactPost" label-width="160">
					<u-input v-model="form.contactPhone" placeholder="请输入联系人手机号" clearable />
				</u-form-item>


				<!-- 负责人手机 -->
				<u-form-item label="联系微信:" prop="contactPhone" label-width="160">
					<u-input v-model="form.contactWxId" placeholder="请输入联系人微信号" clearable type="number" />
				</u-form-item>
			</u-form>

			<!-- 协议勾选 -->
<!-- 			<view class="agreement">
				<u-checkbox-group>
					<u-checkbox v-model="form.agreed" shape="circle" active-color="#2979ff">
						阅读并同意《企业入驻协议》
					</u-checkbox>
				</u-checkbox-group>
			</view> -->

			<!-- 下一步按钮 -->
			<u-button type="default"  :custom-style="btuStyle" @click="handleNext" :loading="loading" shape="circle" class="next-btn">
				提交
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				loading: false,
				// 步骤条
				stepsList: [{
						name: "手机号"
					},
					{
						name: "营业执照"
					},
					{
						name: "企业信息"
					}
				],
				form: {
					contactName: '',
					contactPhone: '',
					contactWxId: '',

					agreed: false
				},

				// 输入框验证
				rules: {
					contactName: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur'
					}],
					contactPhone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							trigger: ['blur', 'change']
						}
					]
				},
				kaoZhengCode: ''  ////考证CODE
			}
		},
		onLoad(options) {
			this.kaoZhengCode = options.code
		},
		methods: {			
			handleNext() {
				this.loading = true;
				this.$u.api.createkzbm({
					"bkzcode": this.kaoZhengCode, //#考证code
					"usercode": uni.getStorageSync('usercode'), //#机构用户编号
					"jgkzusername": this.form.contactName, ///#机构端联系人姓名
					"jgkzphoneno": this.form.contactPhone, ///#机构端联系人姓名
					"jgkzwxid": this.form.contactWxId,  ///#机构端 invitation exam wxid
				}).then(res =>{
					console.log('团队报名信息填写：', res)
					let jgkzcode = res.data.jgkzcode
					setTimeout(() => {
						this.loading = false;
						uni.navigateTo({
							url: `/pages/Institution/examTrain/invitestudent?zcode=${jgkzcode}`
						});
					}, 1000);
				})
				

				

				
				// 表单验证
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	if (!this.form.agreed) {
				// 		return this.$u.toast('请先阅读并同意协议！');
				// 	}

				// 	this.loading = true;

				// 	// 模拟API调用

				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;

		.u-node-tip {
			margin: 10px 10px 0px 10px;
			padding: 0px;
			font-size: 18px;
		}

		.wrap {
			margin-left: 40px;
			padding: 24rpx 24rpx 24rpx 0;
		}

		/deep/ .u-time-axis-item {
			margin-bottom: 0px;
		}

		.circle-number {
			display: inline-flex;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: #55ff7f;
			color: white;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		}

		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}

		.circle-number-1 {}

		// .u-order-title {
		// 	color: #333333;
		// 	font-weight: bold;
		// 	font-size: 32rpx;
		// }

		.u-order-desc {
			// color: rgb(150, 150, 150);
			color: #333333;
			font-size: 28rpx;
			// margin-bottom: 6rpx;
			// line-height: 23px;		
		}


		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.agreement {
				margin: 40rpx 0 60rpx;
				padding-left: 10rpx;
			}

			.next-btn {
				margin-top: 20rpx;
			}
		}
	}
</style>